<template>
  <div :class="className">
    <!-- style -->
    <!--<div v-html="css"></div>-->

    <template v-if="datas.list && datas.list.choose_style == 1">
      <div class="fixed-box 11"  :style="oneCpp" >
        <template v-for="(item, index) in datas.list.list" >
          <!--悬浮按钮静态-->
          <div class="btn" :style="button_style1" :key="index" @touchstart="startDrag($event, index)" @touchmove="onDrag($event,index)" @touchend="stopDrag" @touchcancel="stopDrag">
            <a :href="'tel:' + item.phone" v-if="item.is_minApp == 3">
              <divBackgroundImage :datas="datas" :imageSrc="item.image" :emptyImage="emptyImage"></divBackgroundImage>
            </a>
            <divBackgroundImage :datas="datas" :imageSrc="item.image" :emptyImage="emptyImage" @toUrl="toUrl(item)" v-if="item.is_minApp != 3" ></divBackgroundImage>
            <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%;" v-if="item.is_minApp == 2" @click.stop v-html="item.html"></div>
            <p :style="{width:`${datas.button_size}px`}" class="btnNameC" v-if="item.text">{{item.text}}</p>
          </div>
        </template>
      </div>
    </template>

    <template v-if="datas.list && datas.list.choose_style == 2">
      <div class="fixed-box2" :style="fixed_box_twoPos" v-if="datas.list.show_style == 1" @touchstart="startDrag($event, index)" @touchmove="onDrag($event,index)" @touchend="stopDrag" @touchcancel="stopDrag">
        <!-- <img :style="button_style" :class="[isFold ? 'active' : '']" @click.stop="toOpen" :src="isFold ? datas.list.fold_button || openImage : datas.list.unfold_button || openImage" class="imgs" /> -->
        <divBackgroundImage :datas="datas" :btn_style="button_style" :imageSrc="isFold ? datas.list.fold_button || openImage : datas.list.unfold_button || openImage" :emptyImage="emptyImage" @toUrl="toOpen" class="imgs" :class="[isFold ? 'active' : '']"></divBackgroundImage>
        <div
          class="btn"
          :class="[isFold ? 'active' : '']"
          v-for="(item, index) in datas.list.list"
          :key="index"
          :style="button_style_one(index)"
        >
          <a :href="'tel:' + item.phone" v-if="item.is_minApp == 3">
            <img :src="item.image || emptyImage" :style="{height:`${datas.button_size}px`,width:`${datas.button_size}px`}" />
          </a>
          <img  :style="{height:`${datas.button_size}px`,width:`${datas.button_size}px`}" :src="item.image || emptyImage" v-if="item.is_minApp != 3" @click.stop="toUrl(item)" />
          <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%;" v-if="item.is_minApp == 2" @click.stop v-html="item.html"></div>
          <p :style="{width:`${datas.button_size}px`}" class="btnNameC" v-if="item.text">{{item.text}}</p>
        </div>
      </div>

      <div class="fixed-box2" :style="fixed_box_twoPos" v-if="datas.list.show_style == 2" @touchstart="startDrag($event, index)" @touchmove="onDrag($event,index)" @touchend="stopDrag" @touchcancel="stopDrag">
        <!-- <img :style="button_style" :class="[isFold ? 'active' : '']" @click.stop="toOpen" :src="isFold ? datas.list.fold_button || openImage : datas.list.unfold_button || openImage" class="imgs" /> -->
        <divBackgroundImage :datas="datas" :btn_style="button_style" :imageSrc="isFold ? datas.list.fold_button || openImage : datas.list.unfold_button || openImage" :emptyImage="emptyImage" @toUrl="toOpen" class="imgs" :class="[isFold ? 'active' : '']"></divBackgroundImage>
        <div class="btn" :class="[isFold ? 'active' : '']" style="top: -70px;" :style="btn_1_style" v-if="datas.list.list[0]">
          <a :href="'tel:' + datas.list.list[0].phone" v-if="datas.list.list[0].is_minApp == 3">
            <img :src="datas.list.list[0].image || emptyImage" :style="button_style_child" />
          </a>
          <img :style="{height:`${datas.button_size}px`,width:`${datas.button_size}px`}" :src="datas.list.list[0].image || emptyImage" v-if="datas.list.list[0].is_minApp != 3" @click="toUrl(datas.list.list[0])" />
          <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%;" v-if="datas.list.list[0].is_minApp == 2" @click.stop v-html="datas.list.list[0].html"></div>
          <p :style="{width:`${datas.button_size}px`}" class="btnNameC" v-if="datas.list.list[0].text">{{datas.list.list[0].text}}</p>
        </div>
        <div class="btn" :class="[isFold ? 'active' : '']" :style="btn_3_style" v-if="datas.list.list[1]">
          <a :href="'tel:' + datas.list.list[1].phone" v-if="datas.list.list[1].is_minApp == 3">
            <img :src="datas.list.list[1].image || emptyImage" :style="button_style_child" />
          </a>
          <img :style="{height:`${datas.button_size}px`,width:`${datas.button_size}px`}" :src="datas.list.list[1].image || emptyImage" v-if="datas.list.list[1].is_minApp != 3" @click="toUrl(datas.list.list[1])" />
          <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%;" v-if="datas.list.list[1].is_minApp == 2" @click.stop v-html="datas.list.list[1].html"></div>
          <p :style="{width:`${datas.button_size}px`}" class="btnNameC" v-if="datas.list.list[1].text">{{datas.list.list[1].text}}</p>
        </div>
        <div class="btn" :class="[isFold ? 'active' : '']" :style="btn_4_style" v-if="datas.list.list[2]">
          <a :href="'tel:' + datas.list.list[2].phone" v-if="datas.list.list[2].is_minApp == 3">
            <img :src="datas.list.list[2].image || emptyImage" :style="button_style_child" />
          </a>
          <img :style="{height:`${datas.button_size}px`,width:`${datas.button_size}px`}" :src="datas.list.list[2].image || emptyImage" v-if="datas.list.list[2].is_minApp != 3" @click="toUrl(datas.list.list[2])" />
          <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%;" v-if="datas.list.list[2].is_minApp == 2" @click.stop v-html="datas.list.list[2].html"></div>
          <p :style="{width:`${datas.button_size}px`}" class="btnNameC" v-if="datas.list.list[2].text">{{datas.list.list[2].text}}</p>
        </div>
        <div class="btn" :class="[isFold ? 'active' : '']" style="top: 70px;" :style="btn_2_style" v-if="datas.list.list[3]">
          <a :href="'tel:' + datas.list.list[3].phone" v-if="datas.list.list[3].is_minApp == 3">
            <img :src="datas.list.list[3].image || emptyImage" :style="button_style_child" />
          </a>
          <img :style="{height:`${datas.button_size}px`,width:`${datas.button_size}px`}" :src="datas.list.list[3].image || emptyImage" v-if="datas.list.list[3].is_minApp != 3" @click="toUrl(datas.list.list[3])" />
          <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%;" v-if="datas.list.list[3].is_minApp == 2" @click.stop v-html="datas.list.list[3].html"></div>
          <p :style="{width:`${datas.button_size}px`}" class="btnNameC" v-if="datas.list.list[3].text">{{datas.list.list[3].text}}</p>
        </div>
      </div>
    </template>
    <!-- 海报 -->

    <yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>

    <!-- 海报 end -->

    <van-popup v-model="showLang" position="bottom" round>
      <van-nav-bar title="切换语言" right-text="关闭" @click-right="showLang = false"/>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell v-for="item in language" :title="item.name" :key="item.id" clickable @click="changeLanguage(item.id)">
            <template #right-icon>
              <van-radio :name="item.id" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
import emptyImage from "@/assets/images/new_diy/image.png";
import openImage from "@/assets/images/new_diy/open.png";
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
import divBackgroundImage from "../divBackgroundImage.vue"
import { Toast } from "vant";
import _ from "lodash";
export default {
  props: ["id", "datas", "styles"],
  data() {
    return {
      emptyImage,
      openImage,
      box_width: "375",
      isFold: false,

      posterShow: false,
      poster: "",
      poster_Data: {
        poster_data: null,
        background: {}
      },
      poster_id: null, //海报id
      isNewPosterPlugin: false, //是否为新海报

      showLang: false,
      language: [
        {
          "id": "chinese_traditional",
          "name": "繁體中文",
          "serviceId": "zh-TW"
        },
        {
          "id": "english",
          "name": "English",
          "serviceId": "en"
        },
        {
          "id": "chinese_simplified",
          "name": "简体中文",
          "serviceId": "zh-CN"
        },
        {
          "id": "japanese",
          "name": "日本語",
          "serviceId": "ja"
        },
        {
          "id": "thai",
          "name": "ภาษาไทย",
          "serviceId": "th"
        },
        {
          "id": "malay",
          "name": "Malay",
          "serviceId": "ms"
        },
      ],
      isTouch:false,
      offsetX:"",
      offsetY:"",
      touchStartX:"",
      touchStartY:"",
      //是否长按两秒解锁拖拽
      unlock:false,
      touchTime:"",
    };
  },
  components: { yzGoodsposter,divBackgroundImage },
  mounted() {
    console.log(this.fun.getPhoneEnv());
    if (this.fun.getPhoneEnv() == 3) {
      this.box_width = "375";
    } else {
      this.box_width = document.body.clientWidth;
    }
    this.$nextTick(() => {
      this.initButtons();
    });
  },
  activated() {
    if (this.fun.getPhoneEnv() == 3) {
      this.box_width = "375";
    } else {
      this.box_width = document.body.clientWidth;
    }
    this.$nextTick(() => {
      this.initButtons();
    });
    this.initTouch();
  },
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.initTouch();
  },
  computed: {
    fixed_box_twoPos(){
      const { over_top } = this.datas;
      if( this.offsetY || this.offsetY === 0){
        // 有移动的定位用移动的
        return `
          top: ${this.offsetY}px;
        `
      } else {
        return `
          top: ${over_top}px;
        `
      }
    },
    oneCpp(){
      let style = '';
      if( this.offsetY || this.offsetX || this.offsetX === 0 || this.offsetY === 0){
        // 有移动的定位用移动的
        style += `
          top: ${this.offsetY}px ;
          left: ${this.offsetX}px;
        `
      } else {
        const { over_top, list ,position_location,button_size} = this.datas;
        let isPc = this.fun.getPhoneEnv() == 3 && !this.fun.isApp() && (!this.$route.meta.isPC || (this.$store.state.caseLibrary != null && this.$store.state.caseLibrary.set.pc_style == 0));
        let isLeft = position_location == 'left' ? 10 : this.box_width - 10 - button_size;
        if(isPc){
          // 屏幕可视宽度再减去375的一半
          isLeft = isLeft + (document.body.clientWidth - 375) / 2;
        }
        style += `
          top: ${over_top - (list.button_padding + 50)}px ;
          left: ${isLeft}px;
        `
      }
      return style;
    },
    button_style1(){
      let style = '';
      const { button_size } = this.datas;
      style = `
        width: ${button_size}px;
        margin-bottom:10px;
      `
      return style;
    },
    button_style_one(index){
      return function(index){
        const { position_location, button_size } = this.datas;
        let style;
        if( this.offsetX || this.offsetX === 0 || this.offsetY || this.offsetY === 0){
          style = `
            top: ${-70 * (index + 1)}px;
            left: ${this.offsetX}px
          `;
        }else{
          style = `
             top: ${-70 * (index + 1)}px;
            left: ${position_location == 'left' ? 10 + (button_size - 50) / 2 : this.box_width - 60 - (button_size - 50) / 2}px
          `;
        }
        console.log(style)
        return style;
      }
    },
    // 缩略模式图片
    button_style() {
      const { button_size, position_location,list } = this.datas;
      let style;
      if( (this.offsetX || this.offsetX === 0) && list.show_style != 2){
        style = `width: ${button_size}px;
        height: ${button_size}px;
        position: absolute;
        left: ${this.offsetX}px;
        `;
      }else{
        style = `width: ${button_size}px;
        height: ${button_size}px;
        position: absolute;
        left: ${position_location == "left" ? "10" : this.box_width - 10 - button_size}px;
        `
      }
      if(this.isFold){
        style += `transform: rotate(0deg);
        transition: all 0.35s ease-in-out;
        object-fit: cover;`
      }
      return style;
    },
    button_style_child(){
      const { button_size, position_location } = this.datas;

      return `
                width: ${button_size}px;
                height: ${button_size}px;
                left: ${position_location == "left" ? "10" : this.box_width - 10 - button_size}px;
            `;
    },
    btn_1_style() {
      const { position_location } = this.datas;

      return `
				        left: ${position_location == "left" ? "10" : this.box_width - 60}px;
            `;
    },
    btn_2_style() {
      const { button_size, position_location } = this.datas;

      return `
				        top: ${20 + button_size}px;
				        left: ${position_location == "left" ? "10" : this.box_width - 60}px;
            `;
    },
    btn_3_style() {
      const { button_size, position_location } = this.datas;

      return `
				        top: ${15 - button_size}px;
				        left: ${position_location == "left" ? 20 + button_size : this.box_width - 65 - button_size}px;
            `;
    },
    btn_4_style() {
      const { button_size, position_location } = this.datas;

      return `
				        top: ${button_size - 15}px;
				        left: ${position_location == "left" ? 20 + button_size : this.box_width - 65 - button_size}px;
            `;
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },

  methods: {
    initTouch(){
      this.offsetX = "";
      this.offsetY = "";
      this.isTouch = null;
      this.unlock = false;
      this.touchStartX = "";
      this.touchStartY = "";
      this.touchTime = "";
    },
    startDrag(event, index) {
      // 点击的时候计算长按时间
      this.touchTime = Date.now();
      this.isTouch = setTimeout(() => {
        this.unlock = true;
        this.$notify(this.datas.list.show_style == 2 && this.datas.list.choose_style == 2? "该模式只支持上下移动" :"随意移动悬浮按钮");
      }, 2000);
      const touch = event.changedTouches[0];
      this.touchStartX = touch.pageX;
      this.touchStartY = touch.pageY;
    },
    //判断拖动的坐标是否超出可视屏幕
    //判断拖动的坐标是否超出可视屏幕
    setDocConten:_.throttle(function(x,y){
      //可视屏幕高度
      let docHeight = document.body.clientHeight;
      let docwidth = document.body.clientWidth;
      // 移动目标宽高
      let SelectorHeight = this.datas.list.choose_style == 1?".fixed-box":".fixed-box2 .imgs";
      let SelectorWidth = this.datas.list.choose_style == 1?".fixed-box .btn":".fixed-box2 .imgs";
      let dragHeight = document.querySelector(SelectorHeight).clientHeight;
      let dragWidth = document.querySelector(SelectorWidth).clientWidth;
      let setX = x;
      let setY = y;
      if (setX <= 0) {
        setX = 0;
      }
      if (setY <= 0) {
        setY = 0;
      }
      if (setX + dragWidth >= docwidth) {
        setX = docwidth - dragWidth;
      }
      if (setY + dragHeight >= docHeight) {
        setY = docHeight -dragHeight;
      }
      this.offsetX = setX;
      this.offsetY = setY;
    },0),
    // 触摸移动
    onDrag(event, index) {
      let nowTime = Date.now();
      if((nowTime - this.touchTime) < 2000){
        this.touchTime = "";
        this.unlock = false;
        clearTimeout(this.isTouch);
        this.isTouch = null;
      }
      if(!this.unlock) return
      if(this.isFold) this.isFold = false;
      event.preventDefault(); // 根据需要阻止默认行为
      const touch = event.changedTouches[0];
      const posX = touch.pageX - this.touchStartX;
      const posY = touch.pageY - this.touchStartY;
      this.touchStartX = touch.pageX;
      this.touchStartY = touch.pageY;
      const SelectorDiv = this.datas.list.choose_style == 1?".fixed-box":".fixed-box2";
      let divStyeTop = parseFloat(document.querySelector(SelectorDiv).style.top);
      let divStyleLeft = parseFloat(document.querySelector(this.datas.list.choose_style == 1?SelectorDiv:SelectorDiv+' .imgs').style.left);
      this.setDocConten(divStyleLeft + posX,divStyeTop + posY);
    },
    stopDrag(event) {
      this.touchTime = "";
      this.unlock = null;
      clearTimeout(this.isTouch);
      this.isTouch = null;
    },
    initButtons() {
      if (this.datas.list.choose_style == 1) {
        for (let j = 0; j < this.datas.list.list.length; j++) {
          let script = document.createElement("script");
          script.type = "text/wxtag-template";
          script.text = `<div style="width: ${this.datas.button_size}px;height: ${this.datas.button_size}px;border-radius: 50%"></div>`;
          this.datas.list.list[j].html = `<wx-open-launch-weapp username="${this.datas.list.list[j].gh_id}" path="${this.datas.list.list[j].minApp_link}">${script.outerHTML}</wx-open-launch-weapp>`;
        }
        this.datas.list.list.reverse().reverse(); //改变原始数组从而更新数组
      } else {
        for (let j = 0; j < this.datas.list.list.length; j++) {
          let script = document.createElement("script");
          script.type = "text/wxtag-template";
          script.text = `<div style="width: 50px;height: 50px;border-radius: 50%"></div>`;
          this.datas.list.list[j].html = `<wx-open-launch-weapp username="${this.datas.list.list[j].gh_id}" path="${this.datas.list.list[j].minApp_link}">${script.outerHTML}</wx-open-launch-weapp>`;
        }
        this.datas.list.list.reverse().reverse(); //改变原始数组从而更新数组
      }
    },
    toOpen() {
      this.isFold = !this.isFold;
    },
    toUrl(item) {
      if (item.is_minApp == 1 && item.h5_link) {
        window.location.href = item.h5_link;
      } else if (item.is_minApp == 5) {
        // 打开海报
        this.openQrCode("block",item.poster_id);
      } else if (item.is_minApp == 7) {
        // 切换页面翻译语种
        this.showLang = true;
      }
    },
    //----------------  海报  ------------------
    openQrCode(e,poster_id) {
      this.getPoster(poster_id);
    },
    openQrCode_old() {
      if (!this.poster) {
        if (!this.timer) {
          this.getPoster_oldApi();
          this.timer = setInterval(() => {
            this.getPoster_oldApi();
          }, 3000);
        }
      } else {
        clearInterval(this.timer);
        this.toastPoster.close();
      }
    },
    getPoster(poster_id) {
      if (!this.fun.isTextEmpty(this.poster_Data.poster_data) || !this.fun.isTextEmpty(this.poster)) {
        this.posterShow = true;
        return;
      }
      this.poster_id = poster_id;
      $http.get("member.qrcode.get-poster", {poster_id: poster_id}, {}).then(
        response => {
          if (response.result === 1) {
            this.isNewPosterPlugin = response.data.new || false;
            if (response.data.center_show == 0) {
              //0 返回的默认图片
              this.poster = response.data.image_url;
              this.posterShow = true;
            } else if (response.data.center_show == 1) {
              //前端生成
              this.poster_Data.background.src = response.data.background_url || response.data.background;
              this.poster_Data.background.type = "background";
              this.poster_Data.poster_data = response.data.style_data;
              this.poster_id = response.data.id;
              this.posterShow = true;
            } else if (response.data.center_show == 2) {
              //部分关注二维码不支持跨域，走老接口
              this.toastPoster = Toast({
                duration: -1, // 持续展示 toast
                message: "正在为您生成海报中"
              });
              this.openQrCode_old();
            }
          } else {
            Toast(response.msg);
          }
        },
        response => {
          console.log(response.msg);
          if (this.timer) {
            clearInterval(this.timer);
            if (this.toastPoster) {
              this.toastPoster.close();
            }
          }
        }
      );
    },
    getPoster_oldApi() {
      $http.get("member.poster",{poster_id: this.poster_id}).then(
        response => {
          if (response.result === 1) {
            this.poster = response.data.image_url;
            if (this.poster && this.timer) {
              this.posterShow = true;
              clearInterval(this.timer);
              if (this.toastPoster) {
                this.toastPoster.close();
              }
            }
          } else {
            Toast(response.msg);
            if (this.timer) {
              this.posterShow = true;
              clearInterval(this.timer);
              if (this.toastPoster) {
                this.toastPoster.close();
              }
            }
          }
        },
        response => {
          console.log(response.msg);
          if (this.timer) {
            this.posterShow = true;
            clearInterval(this.timer);
            if (this.toastPoster) {
              this.toastPoster.close();
            }
          }
        }
      );
    },
    uploadImageM(e) {
      //图片上传
      let that = this;
      this.dataURL = e;
      let uploadImage = this.fun.getRealUrl("member.qrcode.uploadLocal", { local_upload: 1, poster_id: that.poster_id, is_new: this.isNewPosterPlugin ? 1 : 0 });
      let fd = new FormData();
      fd.append("file", this.dataURItoBlob(this.dataURL));
      axios
        .post(uploadImage, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          if (response.data.result == 1) {
            $http
              .post("member.qrcode.poster-record", { poster_id: that.poster_id, image: response.data.data.img_url, is_new: this.isNewPosterPlugin ? 1 : 0 })
              .then(response => {
                if (response.result === 1) {
                  console.log("添加海报生成记录成功");
                } else {
                  Toast(response.msg);
                }
              })
              .catch(error => {
                console.log(error);
              });
          } else {
            Toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    dataURItoBlob(dataURI) {
      // 图片转成Buffer---------------------------------
      var byteString = atob(dataURI.split(",")[1]);
      var mimeString = dataURI
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
    },
    changeLanguage(lang){
      // 切换页面翻译语种
      this.showLang = false;
      translate.changeLanguage(lang);
    }
  }
};
</script>

<style lang="scss" scoped>
// 默认
.component-wrapper {
  width: 100%;
}

.poster-popup-class {
  background-color: transparent !important;
}

.fixed-box {
  // width: 375px;
  position: fixed;
  top: 114px;
  z-index: 6;
  text-align: left;
  user-select: none;

  .button {
    /* margin-left: 325px; */
    background-color: white;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    justify-content: center;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #d4d4d4;
    box-shadow: 0 1px 11px 0 rgba(4, 0, 0, 0.04);

    img {
      width: 45%;
      margin: 0 auto;
    }
  }

  .btn {
    width: 50px;
    // height: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 13px;

    a {
      display: block;
      width: 100%;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

  }
}

.fixed-box2 {
  width: 375px;
  top: 114px;
  z-index: 6;
  position: fixed;
  text-align: left;
  user-select: none;
  .imgs {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 6;
    position: relative;

    &.active {
      transform: rotate(135deg);
    }
  }

  .btn {
    width: 50px;
    // height: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    flex-direction: column;
    font-size: 13px;
    opacity: 0;
    transform: scale(0) translateX(0%) translateY(0%);
    transition: all 0.35s ease-in-out;

    a {
      display: block;
      width: 100%;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    &.active {
      transform: scale(1) translateX(0%) translateY(0%);
      opacity: 1;
    }
  }
}

/* 海报部分 */
#ewm {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: rgba(140, 140, 140, 0.72);
  z-index: 100;
  display: none;
  // padding-top: 14%;
  .pic_warn {
    background: #fff;
    color: #000;
    border-radius: 0.625rem;
    width: 14rem;
    height: 2.5rem;
    line-height: 2.5rem;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .pic {
    width: 19.875rem;
    height: 31.375rem;
    // background: #fff;
    border-radius: 0.625rem;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    // transform: translate(-50%, -50%);
    margin: -15.6875rem 0 0 -9.9375rem;

    .ewm_bgImg {
      position: absolute;
      width: 100%;
      // height: 100%;
      height: auto;
      top: 0;
      left: 0;
    }

    .title {
      padding: 0.625rem;
      border-bottom: 0.0625rem solid #ebebeb;

      img {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;

        .set a {
          color: #fff;
          font-size: 24px;
        }

        #ewm {
          width: 100%;
          position: fixed;
          top: 0;
          left: 0;
          height: 100vh;
          background: rgba(140, 140, 140, 0.72);
          z-index: 100;
          display: none;
          padding-top: 14%;

          .pic {
            width: 70%;
            margin: auto;
            background: #fff;
            border-radius: 0.625rem;
            overflow: hidden;

            .title {
              padding: 0.625rem;
              border-bottom: 0.0625rem solid #ebebeb;

              img {
                height: 2.5rem;
                width: 2.5rem;
                border-radius: 50%;
                display: inline-block;
                vertical-align: middle;
              }

              span {
                margin-left: 0.875rem;
                vertical-align: middle;
                font-size: 16px;
              }
            }

            .ewm {
              z-index: 140;

              img {
                width: 50%;
                display: block;
                float: right;
              }
            }
          }

          img {
            width: 100%;
            display: block;
          }
        }
      }
    }
  }

  .diy_poster {
    position: relative;
    background: #fff;
    background-size: 100% 100%;
    width: 19.875rem;
    height: 31.375rem;

    .diy_poster_child {
      position: absolute;

      p {
        width: 100%;
        text-align: left;
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        white-space: nowrap; /* 规定段落中的文本不进行换行 */
      }

      canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }

  img {
    width: 100%;
    display: block;
    height: 100%;
  }
}

.pcStyle #ewm {
  width: 375px;
  left: auto;
}

/* 海报部分end */
.btnNameC {
  margin: 0;
  width: 50px;
  font-size: 12px;
  // line-height: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
@keyframes expand {
  0% {
    background: #999;
  }
  50% {
    background: #f15ff1;
  }
  100% {
    background: #f15;
  }
}

</style>
